﻿<phone:PhoneApplicationPage
    x:Class="WP8.Panorama.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"
    d:DataContext="{d:DesignData SampleData/MainViewModelSampleData.xaml}"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait"  Orientation="Portrait"
    shell:SystemTray.IsVisible="False">


    <!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">

        <!--Panorama control-->
        <phone:Panorama Title="xamldevelopment.blogspot.com">
            <phone:Panorama.Background>
                <ImageBrush ImageSource="/WP8.Panorama;component/Assets/PanoramaBackground.png"/>
            </phone:Panorama.Background>

            <phone:PanoramaItem x:Name="pi" Header="first item">
                
                <phone:LongListSelector Margin="0,0,-22,0" ItemsSource="{Binding Items}" >
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Margin="0,-6,0,12">
                                <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeExtraLarge}"/>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                    
                </phone:LongListSelector>
                
            </phone:PanoramaItem>

            <!--Panorama item two-->
            <phone:PanoramaItem >
                <!--Double line list with image placeholder and text wrapping using a floating header that scrolls with the content-->
                <phone:LongListSelector Margin="0,-38,-22,2" ItemsSource="{Binding Items}">
                    <phone:LongListSelector.ListHeaderTemplate>
                        <DataTemplate>
                            <Grid Margin="12,0,0,38">
                                <Grid.RowDefinitions>
                                    <RowDefinition Height="Auto"/>
                                    <RowDefinition Height="*"/>
                                </Grid.RowDefinitions>
                                <TextBlock Text="second item"
                                           Style="{StaticResource PanoramaItemHeaderTextStyle}"
                                           Grid.Row="0"/>
                            </Grid>
                        </DataTemplate>
                    </phone:LongListSelector.ListHeaderTemplate>
                    <phone:LongListSelector.ItemTemplate>
                        <DataTemplate>
                            <StackPanel Orientation="Horizontal" Margin="12,2,0,4" Height="105" Width="432">
                                <!--Replace rectangle with image-->
                                <Border BorderThickness="1" Width="99" Height="99" BorderBrush="#FFFFC700" Background="#FFFFC700"/>
                                <StackPanel Width="311" Margin="8,-7,0,0">
                                    <TextBlock Text="{Binding LineOne}" TextWrapping="Wrap" Margin="10,0" Style="{StaticResource PhoneTextExtraLargeStyle}" FontSize="{StaticResource PhoneFontSizeLarge}" />
                                    <TextBlock Text="{Binding LineTwo}" TextWrapping="Wrap" Margin="10,-2,10,0" Style="{StaticResource PhoneTextSubtleStyle}" />
                                </StackPanel>
                            </StackPanel>
                        </DataTemplate>
                    </phone:LongListSelector.ItemTemplate>
                </phone:LongListSelector>
            </phone:PanoramaItem>

            <!--Panorama item three-->
            <phone:PanoramaItem Header="third item" >
                <!--Double wide Panorama with large image placeholders-->
                <Grid>
                    <StackPanel Margin="0,4,16,0" Orientation="Vertical" VerticalAlignment="Top">
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal">
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                        </StackPanel>
                        <StackPanel HorizontalAlignment="Left" Orientation="Horizontal" Margin="0,12,0,0">
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                            <Border Background="#FFFFC700" Height="173" Width="173" Margin="12,0,0,0"/>
                        </StackPanel>
                    </StackPanel>
                </Grid>
            </phone:PanoramaItem>
        </phone:Panorama>

        <!--Uncomment to see an alignment grid to help ensure your controls are
            aligned on common boundaries.  The image has a top margin of -32px to
            account for the System Tray. Set this to 0 (or remove the margin altogether)
            if the System Tray is hidden.

            Before shipping remove this XAML and the image itself.-->
        <!--<Image Source="/Assets/AlignmentGrid.png" VerticalAlignment="Top" Height="800" Width="480" Margin="0" Grid.Row="0" Grid.RowSpan="2" IsHitTestVisible="False" />-->

    </Grid>
</phone:PhoneApplicationPage>